<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.m_center {
			display: flex;
			justify-content: center;
				align-items: center;
			}
			
			.m_val {
				margin-left: 3px;
				margin-right: 3px;
				width: 100%;
				border: none;
				border-radius: 5px;
				font-size: 40px;
			}
			
			.m_row {
				background: white;
				display: flex;
				border: 1px solid gray;
				border-radius: 4px;
				padding: 2px;
				margin-bottom: 2px;
			}
			
			.m_img {
				float: left;
				width: 25%;
			}
			
			h1 {
				width: 17px;
				font-size: 17px;
				word-wrap: break-word;
				letter-spacing: 15px;
			}
			
			h2 {
				width: 17px;
				font-size: 14px;
				word-wrap: break-word;
				letter-spacing: 15px;
			}
			</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h3 class="mui-title" >气象站数据详情</h3>
		</header>
		<div class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="mui-content-padded">
					<div class="m_row">
						<div class="m_img">
							<img src="../../images/weatherStation/temperature.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center" style="padding: 10px;">
							<h1>温度</h1>
						</div>
						<div id="temp_out" class="m_center m_val" style="background: #5FCEFF;color: white;">
							-℃
						</div>
					</div>
					<div class="m_row">
						<div class="m_img">
							<img src="../../images/weatherStation/humidity.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center" style="padding: 10px;">
							<h1>湿度</h1>
						</div>
						<div id="rhum_out" class="m_center m_val" style="background: #29B26A;color: white;">
							-%
						</div>
					</div>
					<div class="m_row">
						<div class="m_img">
							<img src="../../images/weatherStation/windSpeed.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center" style="padding: 10px;">
							<h1>风速</h1>
						</div>
						<div id="wind" class="m_center m_val" style="background: #CDCDCD;color: #4153B5;">
							-m/s
						</div>
					</div>
					<div class="m_row">
						<div class="m_img">
							<img src="../../images/weatherStation/windSock.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center" style="padding: 10px;">
							<h1>风向</h1>
						</div>
						<div id="wind_dirc" class="m_center m_val" style="background: #FA7474;color: white">
							-
						</div>
					</div>
					<div class="m_row">
						<div class="m_img">
							<img src="../../images/weatherStation/rain.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center" style="padding: 10px;">
							<h1>雨量</h1>
						</div>
						<div id="rain_day" class="m_center m_val" style="background: #1870ED;color: white;">
							-mm
						</div>
					</div>
					<div class="m_row">
						<div class="m_img">
							<img src="../../images/weatherStation/airPressure.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center" style="padding: 10px;">
							<h1>气压</h1>
						</div>
						<div id="barometer" class="m_center m_val" style="background: #CDCDCD;color: #4153B5;">
							-Pa
						</div>
					</div>
					<div class="m_row">
						<div class="m_img">
							<img src="../../images/weatherStation/sun.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center" style="padding: 10px;">
							<h1>日照</h1>
						</div>
						<div id="solar_radia" class="m_center m_val" style="background: #5FCEFF;color: white;">
							-w/㎡
						</div>
					</div>
					<div class="m_row">
						<div class="m_img">
							<img src="../../images/weatherStation/radiation.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center" style="padding: 10px;">
							<!--<font size="2">紫<br>外<br>线</font>-->
							<h2>紫外线</h2>
						</div>
						<div id="uv" class="m_center m_val" style="background: #CDCDCD;color: #4153B5;">
							-MEDs
						</div>
					</div>
					<div class="m_row">
						<div class="m_img">
							<img src="../../images/weatherStation/icing_one.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center" style="padding: 10px;">
							<h2>结冰厚度</h2>
						</div>
						<div id="ice0_thick" class="m_center m_val" style="background: #5FCEFF;color: #000000;">
							0.0cm
						</div>
					</div>
					<div class="m_row">
						<div class="m_img">
							<img src="../../images/weatherStation/icing_two.png" style="width: 100%; height: 100%;" />
						</div>
						<div class="m_center" style="padding: 10px;">
							<h2>结冰厚度</h2>
						</div>
						<div id="ice1_thick" class="m_center m_val" style="background: #5FCEFF;color: #000000;">
							0.0cm
						</div>
					</div>
					<div id="data_time" class="m_center" style="color: #CDCDCD;">最后更新:2018年xxxxxxxxx</div>
				</div>
			</div>
		</div>
		
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-3.2.1.js"></script>
		<script src="../../js/global.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function(){
				var self = plus.webview.currentWebview();
//				console.log(JSON.stringify(self.datas))
				document.getElementById('temp_out').innerHTML = self.datas.temp_out + '℃'; //温度
				document.getElementById('rhum_out').innerHTML = self.datas.rhum_out + '%'; //湿度
				document.getElementById('wind').innerHTML = self.datas.wind + 'm/s'; //风速
				if(self.datas.wind_dirc != null) { //风向
					var wind_d = getWinD(self.datas.wind_dirc, self.datas.wind);
					document.getElementById('wind_dirc').innerHTML = wind_d.wd.text + "风" + wind_d.ws.level + "级";
				}
				document.getElementById('rain_day').innerHTML = self.datas.rain_day + 'mm'; //雨量
				document.getElementById('barometer').innerHTML = self.datas.barometer + 'Pa'; //气压
				document.getElementById('solar_radia').innerHTML = self.datas.solar_radia + 'w/㎡'; //日照
				document.getElementById('uv').innerHTML = self.datas.uv + 'MEDs'; //紫外线
				//console.log("ice--"+resultData[0].ice0_alarm.substr(0,1));
				if(self.datas.ice0_alarm.substr(0, 1) != 0) {
					document.getElementById('ice0_thick').innerHTML = self.datas.ice0_thick + 'cm'; //结冰1
				}
				if(self.datas.ice1_alarm.substr(0, 1) != 0) {
					document.getElementById('ice1_thick').innerHTML = self.datas.ice1_thick + 'cm'; //结冰2
				}
				document.getElementById('data_time').innerHTML = '最后更新时间:' + self.datas.data_time; //更新时间
			});
			
		</script>
	</body>

</html>